<script lang="ts" setup name="protable">
import { reactive } from "vue";
import { get, post } from "@/api/http";

export interface Column {
  label: string;
  prop: string;
  width?: number;
  format?: (T: string | number) => string | number;
}

export interface Props {
  columns: Column[];
  data: any[];
  operate: any;
  scroll: any;
  extraBtns?: number;
}

export interface Modal {
  open: boolean;
  value: any;
}
const props = defineProps<Props>();
const emit = defineEmits(["update"]);

const updateTable = () => emit("update");

const operateLabels = Object.keys(props.operate);

const modal = reactive<Modal>({
  open: false,
  value: {},
});

const delLoading: boolean = false;

const handleDelete = (row: any) => {
  modal.open = true;
  modal.value = row;
  console.log("handleDelete");
};

const isFn = (val: unknown) => toString.call(val) === `[object Function]`;

const onDelete = (done: Function) => {
  const delFnOrPath = props.operate["删除"];
  if (isFn(delFnOrPath)) {
    done();
    delFnOrPath();
    return;
  }
  post(delFnOrPath, {}, "删除", delLoading)
    .then(() => {
      updateTable();
      modal.value = false;
    })
    .finally(() => done());
};
</script>

<template>
  <a-table :data="props.data" :scroll="props.scroll" :bordered="{ cell: true }">
    <template #columns>
      <a-table-column
        v-for="(item, i) in props.columns"
        :key="item.prop + i"
        :title="item.label"
        :data-index="item.prop"
        align="center"
        :width="item.width"
        ellipsis
        tooltip
      >
        <template #cell="{ record }">
          <!-- 格式化内容 -->
          <template v-if="item.prop == 'sex'">
            <span>{{ record["sex"] ? "男" : "女" }}</span>
          </template>
          <template v-else>
            <span>{{
              item.format ? item.format(record[item.prop]) : record[item.prop]
            }}</span>
          </template>
        </template>
      </a-table-column>
      <a-table-column
        :width="60 + (operateLabels.length + (props.extraBtns ?? 0)) * 80"
        :title="'操作'"
        align="center"
      >
        <template #cell="{ record }">
          <div class="flex-x-around">
            <slot :record="record"></slot>

            <ProButton
              text="编辑"
              icon="edit"
              type="primary"
              v-if="operateLabels.includes('编辑')"
              @click="props.operate['编辑'](record)"
            />

            <ProButton
              text="删除"
              icon="delete"
              type="primary"
              status="warning"
              v-if="operateLabels.includes('删除')"
              @click="handleDelete(record)"
            />
          </div>
        </template>
      </a-table-column>
    </template>
  </a-table>

  <!-- 确认框 -->
  <a-modal
    v-model:visible="modal.open"
    title="提示"
    @cancel="modal.open = false"
    @before-ok="onDelete"
  >
    <div class="text-center">
      <span class="tracking-1px">确认删除{{ modal.value.name }}吗？</span>
    </div>
  </a-modal>
</template>

<style lang="less" scoped></style>
